<template>
	<view class="bg-gray1">
		<!-- 顶部个人信息 -->
		<view class="user_info">
			<view class="info_content">
				<view class="flex justify-between align-center">
					<view class="flex align-center">
						<view v-if="userInfo.headimgUrl" class="user_head"
							:style="'background-image:url(' + userInfo.headimgUrl + ')'">
						</view>
						<view v-if="!userInfo.headimgUrl" class="user_head user_head1"></view>
						<view class="">
							<view class="text-bold text-xl" v-if="userInfo.spreadName">{{userInfo.spreadName}}</view>
							<view class="sm margin-top-sm" v-if="userInfo.phone">
								<image src="../../../static/image/phone.png" mode="" style="width: 20rpx;height:20rpx;">
								</image>
								<text class="mLeft-5">{{userInfo.phone}}</text>
							</view>
						</view>
					</view>
					<view class="" @click="agreeGetUser" style="padding: 30rpx 10rpx 30rpx 30rpx;">
						<image src="../../../static/image/edit.png" mode="" style="width: 30rpx;height:30rpx;"></image>
					</view>
				</view>
				<view class="stats">
					<view class="text-center flex-sub" v-if="userInfo.ycRole==1">
						<view class="sub_title">员工数(人)</view>
						<view class="text-black text-bold font-38">{{countInfo.userNum || 0}}</view>
					</view>
					<view class="text-center flex-sub">
						<view class="sub_title">推广订单数量(笔)</view>
						<view class="text-black text-bold font-38" v-if="userInfo.ycRole!=1">{{countInfo.orderNum||0}}
						</view>
						<view class="text-black text-bold font-38" v-else>{{countInfo.spreadNum||0}}</view>
					</view>
					<view class="text-center  flex-sub">
						<view class="sub_title">推广付款总金额(元)</view>
						<view class="text-black text-bold font-38" v-if="userInfo.ycRole!=1">{{countInfo.orderMoney||0}}
						</view>
						<view class="text-black text-bold font-38" v-else>{{countInfo.spreadMoney||0}}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 菜单 -->
		<text-bar title="我的订单" icon="form" pageUrl="/pages/actYc/yc-disOrderList" gType="yc"></text-bar>
		<text-bar title="申请退款订单" icon="form" pageUrl="/pages/actYc/yc-refundLists" gType="yc"></text-bar>
		<view class="" v-if="userInfo.ycRole==1">
			<text-bar title="分销员列表" icon="friend" pageUrl="/pages/actYc/yc-distributors" gType="yc"></text-bar>
			<text-bar title="分销员订单汇总" icon="form" pageUrl="/pages/actYc/yc-disOrderList?type=hz" gType="yc"></text-bar>
		</view>
		<!-- 订单 -->
		<view>
			<yc-order-list ref="ycOrderList"></yc-order-list>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import api from 'utils/api'
	import ycOrderList from './yc-order-list.vue'

	export default {
		name: 'yc-orderList',
		data() {
			return {
				CustomBar: this.CustomBar,
				theme: app.globalData.theme, //全局颜色变量
				userInfo: {},
				countInfo: {}
			};
		},
		components: {
			ycOrderList
		},
		mounted() {
			this.userInfo = uni.getStorageSync('user_info') || {}
			this.getSData() // 获取统计数据
		},
		methods: {
			// 获取统计数据
			getSData() {
				api.ycSpreadData(this.userInfo.id).then(res => {
					this.countInfo = res.data || {}
				})
			},
			reachBottom() {
				this.$refs.ycOrderList.reachBottom()
			},
			// 用户信息更新
			agreeGetUser(e) {
				uni.getSystemInfo({
					success: (e) => {
						if (e.hostVersion) {
							const v = e.hostVersion.split('.')
							console.log(e)
							if (v && v.length > 2) {
								if (Number(v[0]) >= 8 && Number(v[2]) >= 28) {
									uni.navigateTo({
										url: '/pages/user/user-info/index?v=1&sType=yc'
									})
								} else {
									uni.navigateTo({
										url: '/pages/user/user-info/index?v=2&sType=yc'
									})
								}
							}
						}
			
					}
				})
			},
			reLoadUser(){
				this.userInfo = uni.getStorageSync('user_info') || {}
			}
		}
	};
</script>
<style scoped>
	.user_info {
		background-image: linear-gradient(#FD8CA8, #FFFFFF);
		padding: 30rpx 20rpx 0rpx 20rpx;
	}

	.user_info .info_content {
		background-color: #FFFCFE;
		border-radius: 15rpx;
		padding: 20rpx;
	}

	.user_info .info_content .user_head {
		width: 128rpx;
		height: 128rpx;
		border: #FFFFFF 4rpx solid;
		margin-right: 15rpx;
		border-radius: 50%;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
	}

	.user_info .info_content .user_head1 {
		background-image: url('https://future-app.oss-cn-hangzhou.aliyuncs.com/ui-image/my_default.png');
	}

	.user_info .stats {
		display: flex;
		justify-content: space-between;
		border-top: 1rpx dashed #E5E6EB;
		margin-top: 30rpx;
		padding-top: 20rpx;
	}

	.user_info .stats .sub_title {
		color: #4E5969;
		font-size: 24rpx;
		margin-bottom: 14rpx;
	}

	.referrals {
		margin: 30rpx 20rpx;
		background-image: linear-gradient(90deg, #FAE4C1, #FFF9EE, #F8E7C8, #E2BC74, #F2CD88, #F9DFB7);
		border-radius: 15rpx;
		padding: 20rpx;
		color: #D78840;
	}

	.referrals .grade {
		width: 80rpx;
		font-size: 24rpx;
	}

	.referrals .explain {
		font-size: 22rpx;
		border-top: 1rpx dashed #D78840;
		padding-top: 15rpx;
		margin-top: 20rpx;
	}
</style>